<template>
<div>
  <header-with-back :pathName="pathName">
    选择城市
  </header-with-back>
  <!-- 列表 -->
  <div class="wrapper">
    <div class="list">
      <p class="cityTitle">当前城市</p>
      <ul>
        <li>
          <span>北京</span>
        </li>
        <li>
          <span>北京</span>
        </li>
        <li>
          <span>北京</span>
        </li>
        <li>
          <span>北京</span>
        </li>
      </ul>
    </div>
    <!-- 热门城市 -->
    <div class="hotCity">
      <p class="cityTitle">热门城市</p>
      <ul>
        <li>
          <span>北京</span>
        </li>
        <li>
          <span>北京</span>
        </li>
        <li>
          <span>北京</span>
        </li>
        <li>
          <span>北京</span>
        </li>
      </ul>
    </div>
    <!-- 字母城市列表 -->
    <div class="fontCity">
      <p class="cityTitle">A</p>
      <ul>
        <li>北京</li>
        <li>北京</li>
        <li>北京</li>
        <li>北京</li>
        <li>北京</li>
      </ul>
    </div>
    <div class="fontCity">
      <p class="cityTitle">B</p>
      <ul>
        <li>北京</li>
        <li>北京</li>
        <li>北京</li>
        <li>北京</li>
        <li>北京</li>
      </ul>
    </div>
    <div class="fontCity">
      <p class="cityTitle">C</p>
      <ul>
        <li>北京</li>
        <li>北京</li>
        <li>北京</li>
        <li>北京</li>
        <li>北京</li>
      </ul>
    </div>
  </div>
</div>
</template>
<script>
import HeaderWithBack from '@/components/HeaderWithBack'
export default{
  name: 'City',
  components: {
    HeaderWithBack
  },
  data () {
    return {
      pathName: '/'
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~styles/layout.scss";
  .wrapper{
    position: absolute;
    top:86px;
    left:0;
    right: 0;
    bottom: 0;
    background-color: #f5f5f5;
    overflow: hidden;
    .cityTitle{
      font-size: 24px;
      color:#666;
      margin: 12px 0 12px 20px;
    }
    .hotCity,.list{
      ul{
        @include flex(row);
        background-color: #ffffff;
        padding-left:20px;
        padding-right: 30px;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        li{
          @include flex(row);
          justify-content: flex-start;
          align-items: center;
          width: 33.33%;
          span{
              width: 100%;
              margin: 10px;
              padding: 10px 0;
              border: 1px solid #cccccc;
              font-size: 22px;
              color: #666;
              border-radius: 3px;
              text-align: center;
          }
        }
      }
    }
    .fontCity{
      ul{
        background-color: #ffffff;
        li{
          line-height: 50px;
          font-size: 22px;
          color: #666;
          border-bottom: 1px solid #dddddd;
          padding-left: 20px;
        }
      }
    }
  }
</style>
